import React, { useState, useEffect, useRef } from 'react'
import './shop.css'
import axios from 'axios'
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
import Add from '../parabold.js'
export default function Shop() {
	const div1 = useRef()
	let fn = (e, item) => {
		Add(e, div1.current)
		const productInnCart=cart.find((ite)=>ite._id==item._id)
		if(productInnCart){
			productInnCart.num+=1	
		}else{
			cart.push({...item,num:1})
		}
		setCart([...cart])
		list.forEach(items=>{
			if(items._id==item._id){
				items.num=productInnCart.num
			}
		})
		// setList(list)
		// cart.forEach(i=>{
		// 	shuliang+=i.num
		// })
		// setShuliang(shuliang)
		// cart.forEach(i=>{
		// 	zong+=i.num*i.price
		// })
		// setZong(zong)
		localStorage.setItem('cart',JSON.stringify(cart))
	}
	const qingkongshop=()=>{
		setShuliang(0)
		setZong(0)
		localStorage.setItem('cart',JSON.stringify([]))
		setCart([])
	}
	const navgiate = useNavigate()
	const [cart, setCart] = useState( JSON.parse(localStorage.getItem('cart')) || [])
	const location = useLocation()
	const [] = useState([])
	let id = location.search.split('=')[1].split('&')[0]
	let name = decodeURIComponent(location.search.split('=')[2])
	const [list, setList] = useState([])
	const [cai_type, setCai_type] = useState('')
	const [ca, setCa] = useState([])
	const [shuliang, setShuliang] = useState(0)
	const [zong, setZong] = useState(0)
	const getfoot = () => {
		axios.get(`http://localhost:3000/food?dian_id=${id}&cai_type=${cai_type}`).then(res => {
			let { code, data } = res.data
			setList(data)
		})
	}
	const getca = () => {
		axios.get(`http://localhost:3000/type`).then(res => {
			let { code, data } = res.data
			setCa(data)
		})
	}
	useEffect(() => {
		getfoot()
		getca()
		localStorage.setItem('cart',JSON.stringify(cart))
	}, [])
	return (
		<div>
			<nav className='ma'>
				<div className='header'>
					<span>&lt;</span>
					<span>首页</span>
					<span>···</span>
				</div>
				<div className='hei'>
					<img src="img/header.jpg" alt="" />
					<span>{name}</span>
				</div>
				<div className='poiu'>
					<span></span>
					<span><button>店内点餐</button><button>订单</button></span>
				</div>
				<div className='bod'>
					<div className='le'>
						<div className='lelist'>
							{ca.map((item, index) => {
								return <div key={item._id}>
									<li>{item.name}</li>
								</div>
							})}
						</div>
					</div>
					<div className='ri'>
						{list.map((item, index) => {
							return <div key={item._id}>
								<li className='lmasthhh'>
									<img src={item.img} alt="" />
									<span className='dis'>
										<span>
											{item.name} <br />
											<span>￥{item.price}</span>
										</span>
										<span>
											<span>-</span>&nbsp;&nbsp;&nbsp;&nbsp;
											<span>{item.num}</span>&nbsp;&nbsp;&nbsp;&nbsp;
											<span onClick={(e) => { fn(e, item) }}>+</span>
										</span>
									</span>
								</li>
							</div>
						})}
					</div>
				</div>
				<div className='but'>
					<div className='butone'>
						<div className='aaa' ref={div1}>{shuliang}</div>
						<span>￥{zong}</span>
						<div><button>去结算</button></div>
					</div>
				</div>
				<div>

				</div>
			</nav>
		</div>
	)
}
